<template>
  <component
    :is="getComponent(column)"
    ref="tempRef"
    v-model="text"
    v-bind="column"
    :disabled="column.disabled || disabled"
    :readonly="column.readonly || readonly"
    :placeholder="getPlaceholder(column)"
  >
    <template v-for="(val, key) in slotsMap" #[key]="scope">
      <slot :name="val" v-bind="scope" />
    </template>
  </component>
</template>

<script setup>
import { useVModel } from '@vueuse/core';
import { useVSlots, getComponent, getPlaceholder } from '@/supreme/core';
defineOptions({
  name: 'SuFormItem'
});
const props = defineProps({
  modelValue: {},
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  column: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const tempRef = ref();
const slots = useSlots();
const slotsMap = useVSlots(props, slots);
const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
const text = useVModel(props, 'modelValue', emit);
</script>

<style lang="scss" scoped></style>
